<template>
  <div
    v-if="showOverlay"
    class="overlay"
    style="width: 70%"
    :style="{ height: heightY }"
  >
    <div class="warpper">
      <ul>
        <li
          v-for="(item, index) in extractedPart"
          :key="index"
          :class="{ buttonMune: true, highlight: index === 0 }"
          @click="handleLiClick(index)"
        >
          {{ item.name }}
        </li>
      </ul>
      <div
        class="left"
        style="width: 47.5%; height: 100%; float: left; margin-left: 5px"
      >
        <el-tree
          ref="tree"
          style="margin-left: 10px; margin-top: 5px; margin-bottom: 5px"
          :data="treeDataPop"
          node-key="id"
          :props="defaultProps"
          highlight-current
          class="treeNode"
          @node-click="itemClick"
          :default-expanded-keys="treeData.length !==0 ? [treeData[0].children[0]] : []"
          v-if="treeFlag"
        ></el-tree>
        <img
          v-else
          :src="leftImageIndex !== null && imageData[leftImageIndex] ? imageData[leftImageIndex].description : ''"
          style="width: 100%; height: 100%; padding: 10px"
          alt=""
        />
      </div>
      <div class="center"></div>
      <div
        class="rigth"
        style="width: 47%; height: 100%; float: left; margin-left: 2%"
      >
        <img
          v-if="
            imageData &&
            imageData.length > rightImageIndex &&
            imageData[rightImageIndex].description
          "
          :src="rightImageIndex !== null && imageData[rightImageIndex] ? imageData[rightImageIndex].description : ''"
          style="width: 100%; height: 100%; padding: 10px"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script>
import {clickMaterial, getImgFromCacheByFlag } from "@/api/datacentersg/achives/documentApi";
export default {
  name: "bothPagePop",
  props:{
    name:{
      type:String,
    },
    idCard:{
      type:String,
    }
  },
  data() {
    return {
      showOverlay: false,
      heightY: window.innerHeight - 10 + "px",
      imageData: [],
      leftImageIndex: 0,
      rightImageIndex: 1,
      treeData: [],
      extractedPart: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      treeDataPop: [],
      treeFlag:false,
      materialid:'1',
      currentNodekey:'',
    };
  },
  created() {
    this.init(this.imageData, this.treeData);
  },
  methods: {
    init(imageData, treeData) {
      console.log(imageData,"image")
      this.imageData = imageData;
      this.treeData = treeData;
      this.extractedPart = treeData.map((item) => ({
        name: item.name.slice(0, 1),
      }));
      this.showOverlay = true;
      
    },
    handleLiClick(index) {
      // 根据点击的索引获取对应的节点数据
      this.treeDataPop = [...this.treeData[index].children];
      this.treeFlag = true;
    },
    itemClick(data){
      if (data.children && data.children.length > 0) {
        // 点击的是父节点，不执行任何操作
        return;
      }
      this.treeFlag = false;
      this.currentNodekey = data.id;
      this.nameTree = data.name; 
      const materialid = this.materialid && this.currentNodekey;
      const params = {
        name: this.name,
        idCard:this.idCard, //身份证号
        materialid: materialid, //点击的目录ID
      };
      clickMaterial(params).then((result) => {//
         if(result.code === 0){
             this.imageData = result.data.res_data;
             this.imageData.forEach((item,i)=>{
              const paramsNew = {
                name: this.name,
                idCard:this.idCard, //身份证号
                fileName:item.fileName,//文件名
              }
              getImgFromCacheByFlag(paramsNew).then((result) => {
                if(result.code === 0){
                  this.$set(item, 'description', result.data.res_data);
                }
              });
            })
         }
      })
    },
    showPreviousImages() {
      if (this.leftImageIndex > 1) {
        this.leftImageIndex -= 2;
        this.rightImageIndex -= 2;
      }
    },
    showNextImages() {
      if (this.leftImageIndex < this.imageData.length - 1) {
        this.leftImageIndex += 2;
        this.rightImageIndex += 2;
      }
    },
    close() {
      this.showOverlay = false;
    },
  },
};
</script>

<style scoped>
ul {
  list-style: none;
  position: absolute;
  right: 1345px;
  top: 168px;
}
.treeNode /deep/ .el-tree>.el-tree-node> .el-tree-node__content{
    background: #fff;
}
.buttonMune {
  /* position: relative;
  right: 47.458vw;
  top: 117px; */
  background: #009ae8;
  width: 70px;
  height: 50px;
  font-size: 16px;
  border-radius: 10px;
  border: 1px solid #ccc;
  color: #fff;
  line-height: 50px;
  text-align: center;
  margin-left: 170px;
  margin-top: 8px;
  box-shadow: 2px 2px 10px #ccc;
}
/* 设置默认高亮样式 */
.buttonMune.highlight {
  background: #fbae26;
  color: #fff;
  font-size: 16px;
}

.buttonMune:hover {
  background: #fbae26;
  color: #fff;
  font-size: 16px;
}
.center {
  float: left;
  height: 100%;
  border: 1px solid #ccc;
  margin-left: 1.438vw;
  box-shadow: 0.104vw 0.104vw 0.521vw #ccc;
}
.warpper {
  width: 100%;
  height: 100%;
  background: #bab9b3;
}
.overlay {
  position: fixed;
  top: 5px;
  left: 300px;
  width: 100%;
  height: 950px;
  /* background-color: rgba(0, 0, 0, 0.5); 半透明背景色 */
  z-index: 999; /* 设置合适的 z-index 值 */
}
</style>